<script>
	estado_transaccion='<?php echo $estado_transaccion?>';
	estado_correcto='Se ha registrado un nuevo plan exitosamente.';
	estado_incorrecto='Error al registrar un nuevo plan: No se pudo conectar al servidor. Por favor vuelva a intentarlo.';
</script>
<form name="form_social" method="post" action="<?php echo base_url()?>index.php/social/guardar_plan" enctype="multipart/form-data" accept-charset="utf-8">
	 <?=llaveform()?>
    <div id="wizard" class="swMain">
        <ul>
            <li>
                <a href="#step-1">
                    <span class="stepNumber">1<small>er</small></span>
                    <span class="stepDesc">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Paso<br/>
                        <small>&nbsp;Plan</small>
                    </span>
                </a>
            </li>
            <li>
                <a href="#step-2">
                    <span class="stepNumber">2<small>do</small></span>
                    <span class="stepDesc">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Paso<br/>
                        <small>&nbsp;Institución</small>
                    </span>
                </a>
            </li>
            <li>
                <a href="#step-3">
                    <span class="stepNumber">3<small>er</small></span>
                    <span class="stepDesc">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Paso<br/>
                        <small>&nbsp;Asignaciones</small>
                    </span>
                </a>
            </li>
            <li>
                <a href="#step-4">
                    <span class="stepNumber">4<small>to</small></span>
                    <span class="stepDesc">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Paso<br/>
                        <small>&nbsp;Documentos</small>
                    </span>
                </a>
            </li>
        </ul>
        <div id="step-1">	
            <h2 class="StepTitle">Ingreso de la información del Plan</h2>
            <table>
            <tr>
            <td>
			<p>
                <label>Código del Plan: </label>
                <input type="text" name="numero" size="15" id="numero" />
            </p>
            <p>
                <label class="label_textarea">Título del Proyecto: </label>
                <textarea name="titulo" id="titulo" style="resize:none; width:400px" rows="3"></textarea>
            </p>
            </td>
            <td rowspan="2" width="300px" align="right">
            <p>
            	<label style="width:100px">Número de Horas: </label>
                <input type="text" name="num_horas" id="num_horas" size="5" />
            </p>
            <p>
            	<label class="label_textarea">Horarios: </label>
                <textarea name="horarios" id="horarios" style="resize:none;" rows="3"></textarea>
            </p>
            <p>
                <label style="width:90px">Presupuesto ($): </label>
                <input type="text" name="presupuesto" id="presupuesto" size="10" />
            </p>
            </td>
            </tr>
            <tr>
            <td>
            <p>
                <label>Período: 
                Desde: </label> <input type="text" name="inicioperiodo" id="inicioperiodo" />&nbsp;&nbsp;&nbsp;
                Hasta: <input type="text" name="finperiodo" id="finperiodo" />
            </p>
            <br />
            <p>
               <label style="width:150px">Fecha de Acuerdo de Aprobación del Plan: </label>
               <input type="text" name="fechaaprobacion" id="fechaaprobacion" />
            </p>
            </td>
           </tr>
          </table>
        </div>
        <div id="step-2">	
            <h2 class="StepTitle">Ingreso de la Información de la Institución</h2>
            <table width="900px">
            <tr>
            <td>
            <p>
                <label style="width:150px">Nombre de la Institución: </label>
                <input type="text" name="institucion" id="institucion" size="45"/>
            </p>
            <p>
            	<label style="width:150px">Responsable: </label>
            	<input type="text" name="responsable" id="responsable" size="40">
            </p>
            <p>
            	<label style="width:150px">Teléfono del responsable: </label>
            	<input type="text" name="tel_responsable" id="tel_responsable" size="25">
            </p>
            <p>
               <label style="width:150px">Municipio: </label>
               <select class="select" style="width:300px" id="id_municipio" name="id_municipio">
               <?php
			    foreach($municipios_depto as $mun)
			    {
			   		echo "<option value='".$mun['id_municipio']."'>".ucwords($mun['departamento']).", ".ucwords($mun['municipio'])."</option>";
				}
               ?>
               </select> 
            </p>
            </td>
            <td>
            <p>
            	<label style="width:150px" class="label_textarea">Centro/Comunidad: </label>
            	<textarea name="comunidad" id="comunidad" style="width:200px;resize:none"></textarea>
            </p>
            <p>
            	<label style="width:150px" class="label_textarea">Detalle de la Dirección: </label>
            	<textarea name="detalle" id="detalle" style="resize:none; width:200px"></textarea>
            </p>
             <p>
            	<label style="width:150px">Número de Beneficiarios</label>
            	<input type="text" name="beneficiarios" id="beneficiarios" size="4" />
            </p>
            </td>
            </tr>
            </table>
        </div>
        <div id="step-3">	
            <h2 class="StepTitle">Información de Asignación de Tutor y Estudiantes al Proyecto</h2>
            <p>
            	<label>Tutor: </label>
            	<select name="id_tutor" id="id_tutor" class="select" style="width:350px">
					<?php
					foreach($datos as $d)
					{
						echo "<option value='".$d['id_tutor']."'>".ucwords($d['tutor']).", ".$d['departamento']."</option>";
					}
                    ?>
               </select>
            </p>
            <p>
            	<label style="width:350px">Presione click en la imagen para agregar un estudiante</label>
            	<a rel="leanModal" title="Ver Estudiantes" href="#ventana">
                <img src="<?php echo base_url(); ?>img/agregar.png" width="30px" />
                </a>
           	</p>
            <p>
                <table align="center" class="table_design" cellpadding="0" cellspacing="0">
                <thead>
                	<tr>
                    	<th>Carnet</th>
                        <th>Nombre Completo</th>
                        <th>Sexo</th>
                        <th>Teléfono</th>
                        <th>E-mail</th>
                    </tr>
                </thead>
                <tbody id="content-table">
                </tbody>
                </table>
            </p>
        </div>
        <div id="step-4">	
            <h2 class="StepTitle">Seleccione los documentos correspondientes</h2>
            <p>
            	<label>Seleccione el Acuerdo de Aprobación del Plan: </label>
                <input type="file" name="userfile" id="userfile" onchange="validate_fileupload(this.value)" />
            </p>
            <br />
            <p>
            	<label>Seleccione el Documento del Plan: </label>
                <input type="file" name="userfile1" id="userfile2" onchange="validate_fileupload(this.value)" />
            </p>
        </div>
    </div>
</form>
<div id="ventana" style="width:1080px; left:10% !important;">
    <div id='signup-header'>
        <h2>Listado de Estudiantes de Académica</h2>
        <a class="modal_close" id="cerrar"></a>
    </div>
    <form method="post" id="form_estudiantes" name="form_estudiantes" style="width:875px;">

    <table class="grid" align="center">
    <thead>
    <tr>
        <th>Carnet</th>
        <th>Nombre</th>
        <th>Carrera</th>
        <th>Porcentaje</th>
        <th>Seleccionar</th>
    </tr>
    </thead>
    <tbody>
        <?php
        foreach($estudiante_academica as $estudiante)
        {
            echo "<tr>";
            echo "<td>".$estudiante['carnet']."</td>";
            echo "<td>".ucwords(utf8_encode($estudiante['estudiante']))."</td>";
            echo "<td>".ucwords(utf8_encode($estudiante['carrera']))."</td>";
            echo "<td>".$estudiante['porcentaje']."</td>";
            echo "<td><input type='checkbox' name='alumno[]' value='".$estudiante['carnet']."'></td>";
			echo "<input type='hidden' name='nombre[]' value='".ucwords(utf8_encode($estudiante['estudiante']))."' >";
			 echo "<input type='hidden' name='datos[]' value='".$estudiante['cod_carrera']."**".utf8_encode($estudiante['nombre'])."**".utf8_encode($estudiante['apellido'])."' >";
            echo "</tr>";
        }
        ?>
    </tbody>
    </table>
     <p style="text-align: center;">
        <button type="button" class="boton_validador" onclick="agregarEstudiantes()">Agregar</button>
    </p>
</form>
</div>
<script language="javascript">
$(document).ready(function(){
	
	$('#wizard').smartWizard();
	
	function startChange()
	{
		var startDate = start.value(),
		endDate = end.value();
	
		if (startDate) 
		{
			//startDate = new Date(2014,07,01);
			startDate.setDate(startDate.getDate());
			end.min(startDate);
		}
		else if (endDate)
		{
			start.max(new Date(endDate));
		}
		else
		{
			endDate = new Date();
			start.max(endDate);
			end.min(endDate);
		}
	}
	
	function endChange()
	{
		var endDate = end.value(),
		startDate = start.value();
	
		if (endDate)
		{
			endDate = new Date(endDate);
			endDate.setDate(endDate.getDate());
			start.max(endDate);
		}
		else if (startDate)
		{
			end.min(new Date(startDate));
		}
		else
		{
			endDate = new Date();
			start.max(endDate);
			end.min(endDate);
		}
	}
	
	var start = $("#inicioperiodo").kendoDatePicker({
		change: startChange,
		format: "dd-MM-yyyy" 
	}).data("kendoDatePicker");

	var end = $("#finperiodo").kendoDatePicker({
		change: endChange,
		format: "dd-MM-yyyy" 
	}).data("kendoDatePicker");

	start.max(end.value());
	end.min(start.value());
	
	var fecha_acuerdo=$("#fechaaprobacion").kendoDatePicker({
		culture: "es-SV",
		format: "dd-MM-yyyy"
	}).data("kendoDatePicker");
	
	$('#numero').validacion({
		req:true,
		patt: /^([P]{1}[./]{1}[0-3]{1}[0-9]{1}[.-][0|1]{1}[0-9]{1}[.-][2]{1}[0-9]{3}[./][I|V|X|L]{1,2}[.-]{1}[0-9]{1,4})$/i,
		men: "formato correcto: P/dd-mm-aaaa/XX-####"
	});
	$('#titulo').validacion({
		req:true,
		lonMin:15
	});
	$('#num_horas').validacion({
		req:true,
		ent:true,
		numMin:300
	});
	$('#horarios').validacion({
		req:true,
		lonMin:15
	});
	$('#presupuesto').validacion({
		req:true,
		valPrecio:true	
	});
	$('#inicioperiodo').validacion({
		req:true,
		valFecha:true
	});
	$('#finperiodo').validacion({
		req:true,
		valFecha:true
	});
	$('#fechaaprobacion').validacion({
		req:true,
		valFecha:true
	});
	$('#institucion').validacion({
		req:true
	});
	$('#responsable').validacion({
		req:true,
		valNombre:true
	});
	$('#tel_responsable').validacion({
		req:true,
		patt: /^([2|6|7]{1}[0-9]{3}[.-]{0,1}[0-9]{4})$/i,
	});
	$('#id_municipio').validacion({
		req:true
	});
	$('#comunidad').validacion({
		req:false,
		lonMin:3
	});
	$('#detalle').validacion({
		req:false,
		lonMin:3
	});
	$('#beneficiarios').validacion({
		req:true,
		ent:true
	});
	$('#id_tutor').validacion({
		req:true
	});
	$('#userfile').validacion({
		req:true
	});
	$('#userfile2').validacion({
		req:true
	});
});

function agregarEstudiantes()
{
	chk=document.getElementsByName('alumno[]');
	cnt=document.getElementsByName('carnet[]');
	nombre=document.getElementsByName('nombre[]');
	data=document.getElementsByName('datos[]');
	
	var cont=$('#content-table').html();
	for(i=0;i<chk.length;i++)
	{
		bandera=false;
		for(j=0;j<cnt.length;j++)
		{
			if(chk[i].value==cnt[j].value) bandera=true;
		}
		
		if(chk[i].checked && bandera==false)
		{
			cont=cont+'<tr>';
			cont=cont+'<td>'+chk[i].value+'</td>';
			cont=cont+'<td>'+nombre[i].value.capitalize()+'</td>';
			cont=cont+'<td align="center"><select class="select" name="sexo[]"><option value="0">Seleccione</option><option value="m">Masculino</option><option value="f">Femenino</option></select></td>';
			cont=cont+'<td align="center"><input type="text" name="telefono[]" size="6" maxlength="9"></td>';
			cont=cont+'<td align="center"><input type="text" name="correo[]" size="20"><input type="hidden" name="info[]" value="'+data[i].value+'"></td>';
			cont=cont+'</tr>';
			cont=cont+'<input type="hidden" name="carnet[]" value="'+chk[i].value+'" >';
		}
	}
	$('#content-table').html(cont);
	$('#cerrar').click();
}


function validate_fileupload(fileName)
{
    var allowed_extensions = new Array("DOC","doc","DOCX","docx","PDF","pdf","XPS","xps","JPG","jpg","PNG","png","GIF","gif");
    var file_extension = fileName.split('.').pop(); // split function will split the filename by dot(.), and pop function will pop the last element from the array which will give you the extension as well. If there will be no extension then it will return the filename.
    var tipoArchivo= false;
    for(var i = 0; i <= allowed_extensions.length; i++)
    {
        if(allowed_extensions[i]==file_extension)
        {
     		tipoArchivo=true;
            return true; // valid file extension
            
        }
    }
    alertify.alert("Seleccione un archivo válido, de formato: .doc | .docx | .pdf | .xps | .jpg | .png | .gif");
	tipoArchivo=false;
    return false;
}

</script>